<template>
  <LogLoginSearch v-model="search" @search="reloadSearch"></LogLoginSearch>
  <Table border :columns="columns" :data="data">

    <template #status="{ row, index }">
      <DotTag type="primary" v-if="row.status">正常</DotTag>
      <DotTag type="error" v-else>异常</DotTag>
    </template>

    <template #footer>
      <div style="min-width: 300px; max-width: 380px;">
        <van-pagination v-model="pagination.page" :total-items="pagination.total"
                    :items-per-page="pagination.pageSize" @page-click="reloadSearch"
                    :show-page-size="5" force-ellipses/>
      </div>
    </template>
  </Table>
</template>

<script setup>

import VanPagination from '../components/VanPagination.vue'
import LogLoginSearch from '../components/LogLoginSearch.vue'
import DotTag from "../components/DotTag.vue";
import {reactive, ref, onMounted } from 'vue'
import API from '../api/index.js'

const columns = reactive([
    {type: 'selection', width: 60, align: 'center'},
    {title: '登录人员', key: 'username'},
    {title: '操作系统', key: 'osName'},
    {title: '浏览器', key: 'browserName'},
    {title: 'IP地址', key: 'ip'},
    {title: '登录地点', key: 'address'},
    {title: '登录状态', slot: 'status'},
    {title: '失败原因', key: 'message'},
    {title: '登录时间', key: 'createTime'}
]) ;
// 配置分页相关的信息
const pagination = reactive({page: 1, total: 0, pageSize: 10})

// 配置数据
const data = ref([]) ;
const search = ref({}) ;

function showData() {
  // 调用查询登录日志的接口、完成 日志查询
  API.queryLogs(pagination.page, pagination.pageSize, search.value).then(({data:ret})=> {
     if (ret.status === "10000") {
        data.value = ret.data.list ;
        pagination.total = ret.data.total ;
     }
  })
}

function reloadSearch() {
   pagination.page = 1;
   showData() ;
}

onMounted(()=> {
   showData();
})

</script>

<style>
</style>